<template>
    <div>
        <div class="topbar bg-black py-2 px-3 d-flex ai-center">
            <img src="@/assets/logo.png" height="30" alt="" sizes="">
                <!-- 用flex-1去占据全部剩余的空间 -->
            <div class="px-2 flex-1">
                <div class="text-white">王者荣耀</div>
                <div class="text-dark-1 fs-xxs">团队成就更多</div>
            </div>
        <button class="btn bg-primary jc-end" type="button">立即下载</button>
        </div>
        <div class="pt-3 pb-2 bg-primary">
            <div class="nav nav-inverse jc-around pb-1">
                <div class="nav-item nav-inverse-active">
                    <router-link class="nav-link" tag='div' to='/'>首页</router-link>
                </div>
                <div class="nav-item ">
                    <router-link class="nav-link" tag='div' to='/'>攻略中心</router-link>
                </div>
                <div class="nav-item ">
                    <router-link class="nav-link" tag='div' to='/'>赛事中心</router-link>
                </div>
            </div>
        </div>
        
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped lang='scss'>
    .topbar{
        position:sticky;
        top: 0;
        z-index: 999;
    }
</style>